<template>
  <el-dialog
    width="80%"
    @open="handleOpen"
    @close="handleClose"
    title="详情"
    :visible="dialogVisible"
  >
    <el-form :model="detailData" label-width="120px" label-position="left">
      <h1>论坛内容</h1>
      <el-row>
        <el-col :span="8">
          <el-form-item label="论坛标题">
            {{ detailData.title }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布时间">
            {{ detailData.createdAt | timeFilter }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="作者">
            <span>{{ detailData.userNickName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="内容">
            <span>{{ detailData.content }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="相关图片">
            <el-image
              v-for="item in detailData.imgs.split(',')"
              :key="item"
              :src="item"
              style="height: 80px;width: 80px"
            ></el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <hr />
      <div v-if="detailData.houseId">
        <el-row>
          <el-col :span="8">
            <el-form-item label="房屋名">
              {{ detailData.houseName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋地址">
              {{ detailData.houseAddress }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区">
              {{ detailData.houseAreaName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="房屋租金">
              {{ detailData.houseRent }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              {{ detailData.houseCreatedAt | timeFilter }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋状态">
              {{
                detailData.houseStatus == 1
                  ? "下架"
                  : detailData.houseStatus == 2
                  ? "上架"
                  : detailData.houseStatus == 3
                  ? "已出租"
                  : "暂存"
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否是学区房">
              {{ detailData.houseIsSchool ? "是" : "否" }}
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="detailData.houseIsSchool">
            <el-form-item label="所在学区">
              {{ detailData.houseSchoolName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              {{ detailData.houseDescription }}
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20">
          <el-form-item label="" label-width="0px">
            <el-input v-model="content" type="textarea" :rows="5" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="reply">回复</el-button>
        </el-col>
      </el-row>
      <hr />
      <h1>评论内容</h1>
      <div v-for="item in detailData.replies" :key="item.id">
        <el-row>
          <el-col :span="8">
            <el-form-item label="评论人">
              {{ item.userNickName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="评论时间">
              {{ item.createdAt | timeFilter }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作">
              <el-button type="text" @click="toRemoveReply(item.id)"
                >删除</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="评论内容">
              {{ item.content }}
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
      </div>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import detailDialog from "../../../mixins/detailDialog";
import axios from "axios";

export default {
  name: "detailDialog",
  mixins: [detailDialog],
  data() {
    return {
      detailData: {
        title: "",
        content: "",
        createdAt: "",
        userNickName: "",
        imgs: "",
        houseId: "",
        replies: [],
        houseName: "",
        houseAddress: "",
        houseAreaName: "",
        houseRent: "",
        houseCreatedAt: "",
        houseStatus: "",
        houseIsSchool: "",
        houseSchoolName: "",
        houseDescription: ""
      },
      content: "",
      getDetailUrl: "/api/comment/comment"
    };
  },
  methods: {
    async reply() {
      if (!this.content) {
        this.$message({ type: "error", message: "内容不得为空" });
        return;
      }
      const {
        data: { errno, message }
      } = await axios.post("/api/reply/reply", {
        content: this.content,
        contentId: this.opId
      });
      if (!errno) {
        this.$message({ type: "success", message: "添加成功" });
      } else {
        this.$message({ type: "error", message });
      }
      this.content = "";
      this.handleOpen();
    },
    async toRemoveReply(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const {
          data: { errno, message }
        } = await axios.delete("/api/reply/reply/" + id);
        if (!errno) {
          this.$message({ type: "success", message: "操作成功" });
          this.handleOpen();
        } else {
          this.$message({ type: "error", message });
        }
      });
    }
  }
};
</script>

<style scoped></style>
